<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>MessageBoard</title>
		<meta name="author" content="Devil" />
		<script type="text/javascript" src="JS/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div#apDiv2").hide();
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div#apDiv2").hide();
  });
});
</script>

<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
	$(".panel").slideUp("slow");
	if($(this).prev().is(":hidden"))
	{$(this).prev().slideDown("slow");}
    
  });
});
</script>

 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>

 <script type="text/javascript"> 
$(document).ready(function(){
$(".flip1").click(function(){
    $(".panel1").slideToggle("slow");
  });
});
</script>
<style type="text/css"> 
div.panel1,p.flip1
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel1
{
height:120px;
display:none;
}
</style>

 <script type="text/javascript"> 
$(document).ready(function(){
$(".flip2").click(function(){
    $(".panel2").slideToggle("slow");
  });
});
</script>
<style type="text/css"> 
div.panel2,p.flip2
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel2
{
height:120px;
display:none;
}
</style>




<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage(test)</title>
<style type="text/css">
#apDiv1 {
	position:absolute;
	width:1440px;
	height:900px;
	z-index:1;
	background-color: #666666;
}
#apDiv2 {
	position:absolute;
	width:502px;
	height:297px;
	z-index:2;
	left: 66px;
	top: 233px;
	font-family: "Arial Black", Gadget, sans-serif;
	text-align: center;
}
#apDiv3 {
	position:absolute;
	width:344px;
	height:231px;
	z-index:3;
	left: 1096px;
	top: 242px;
}
#apDiv4 {
	position:absolute;
	width:230px;
	height:58px;
	z-index:4;
	left: 1311px;
	top: 883px;
	font-weight: bold;
	font-size: 16px;
}
#apDiv5 {
	position:absolute;
	width:345px;
	height:268px;
	z-index:5;
	left: -3px;
	top: 252px;
}
#apDiv6 {
	position:absolute;
	width:344px;
	height:33px;
	z-index:5;
	left: 1096px;
	top: 215px;
}
#apDiv7 {
	position:absolute;
	width:344px;
	height:34px;
	z-index:5;
	left: 1099px;
	top: 214px;
}
#apDiv8 {
	position:absolute;
	width:344px;
	height:34px;
	z-index:5;
	left: 1098px;
	top: 176px;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
	font-family: "微软雅黑", "黑体";
}
</style>
	</head>
	
	<body>
	<div id="apDiv1"><img src="Pictures/Homepage.png" width="1440" height="900" /></div>
<div id="apDiv2">
  <p>Are You Ready?</p>
  <button>yes</button>
</div>
<div id="apDiv3">
	
<div class="MessageBoard">
	<div class="panel">
		<p>用户名</p>
		<p>内容。</p>
	</div>
	<p class="flip">点击展开</p>
</div>

<div class="MessageBoard">
	<div class="panel">
		<p>用户名</p>
		<p>内容。</p>
	</div>
	<p class="flip">点击展开</p>
</div>
 
<div class="MessageBoard">
	<div class="panel">
		<p>用户名</p>
		<p>内容。</p>
	</div>
	<p class="flip">点击展开</p>
</div>
 
<p class="flip2">点击展开</p>
  <div id="apDiv5">
    <form id="form1" name="form1" method="post" action="">
      <p>
        <label for="MessageBoard"></label>
        <textarea name="MessageBoard" id="MessageBoard" cols="45" rows="10"></textarea>
      </p>
      <p>
        <input type="submit" name="commit" id="commit" value="提交" />
      </p>
    </form>
  </div>
</div>
<div id="apDiv4"><a href="Login.html">返回登录</a></div>
<div id="apDiv8">留 　言 　板</div>
</body>
</html>

